<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!-- 轮播图 -->
<div id="mainCarousel" class="carousel slide mb-4" data-bs-ride="carousel" data-bs-interval="5000">
    <div class="carousel-indicators">
        <c:forEach items="${banners}" var="banner" varStatus="status">
            <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="${status.index}" class="${status.index == 0 ? 'active' : ''}" aria-current="${status.index == 0 ? 'true' : 'false'}" aria-label="Slide ${status.index + 1}"></button>
        </c:forEach>
        
        <c:if test="${empty banners}">
            <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </c:if>
    </div>
    
    <div class="carousel-inner">
        <c:forEach items="${banners}" var="banner" varStatus="status">
            <div class="carousel-item ${status.index == 0 ? 'active' : ''}">
                <c:choose>
                    <c:when test="${not empty banner.linkUrl}">
                        <a href="${banner.linkUrl}" title="${banner.title}">
                            <img src="${banner.imageUrl}" class="d-block w-100" alt="${banner.title}">
                        </a>
                    </c:when>
                    <c:otherwise>
                        <img src="${banner.imageUrl}" class="d-block w-100" alt="${banner.title}">
                    </c:otherwise>
                </c:choose>
                <div class="carousel-caption d-none d-md-block">
                    <h2>${banner.title}</h2>
                </div>
            </div>
        </c:forEach>
        
        <!-- 如果没有轮播图数据，显示默认banner -->
        <c:if test="${empty banners}">
            <div class="carousel-item active">
                <img src="${pageContext.request.contextPath}/static/images/carousel/default-banner1.jpg" class="d-block w-100" alt="Banner 1">
                <div class="carousel-caption d-none d-md-block">
                    <h2>运动装备限时特惠</h2>
                    <p>全场运动装备，满300减50</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="${pageContext.request.contextPath}/static/images/carousel/default-banner2.jpg" class="d-block w-100" alt="Banner 2">
                <div class="carousel-caption d-none d-md-block">
                    <h2>新品上市</h2>
                    <p>探索最新的运动科技</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="${pageContext.request.contextPath}/static/images/carousel/default-banner3.jpg" class="d-block w-100" alt="Banner 3">
                <div class="carousel-caption d-none d-md-block">
                    <h2>户外运动季</h2>
                    <p>享受自然，挑战极限</p>
                </div>
            </div>
        </c:if>
    </div>
    
    <button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">上一个</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">下一个</span>
    </button>
</div> 